<template>
    <div class="aboutBox">
        <div class="left">
            <img src="../../assets/image/contact.png" alt="">
        </div>
        <div class="right">
            <h1 class="titleText">ABOUT</h1>
            <p>
                {{ contactData.about }}
            </p>


            <h1 class="titleText">CONTACT</h1>
            <p style="margin-bottom: 0;"><strong>Mailing Address</strong></p>
            <span style="margin-bottom: 20px;font-family: regularfont;">{{ contactData.contact }}</span>
            <!-- <p
                style="margin: 0px 0px 5px;;color: #000000;font-family: regularfont;font-size: 13px;text-transform: uppercase;">
                {{ contactData.contact }}</p> -->
            <!-- <p
                style="margin: 0px 0px 5px;;color: #000000;font-family: regularfont;font-size: 13px;text-transform: uppercase;">
                OFFICE@INNOCENCEMODELS.COM</p>
            <p>INNOCENCE ANTWERP</p>
            <p
                style="margin: 0px 0px 5px;;color: #000000;font-family: regularfont;font-size: 13px;text-transform: uppercase;">
                MARJOLEIN@INNOCENCEMODELS.COM</p>
            <p>INNOCENCE MILAN</p>
            <p
                style="margin: 0px 0px 5px;;color: #000000;font-family: regularfont;font-size: 13px;text-transform: uppercase;">
                ART@INNOCENCEMODELS.COM</p> -->

        </div>
    </div>
</template>

<script setup lang="ts">
import { showContactAPI } from '@/apis/user';
import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';

const contactData = ref({
    "id": 1,
    "image": "https://model-project3.oss-cn-guangzhou.aliyuncs.com/7d97b6fa-71ec-41f3-b463-86d90ed90b07.jpg",
    "about": "Leading Model Agency in Amsterdam, Milan and Antwerp.\r\n\r\nInnocence Models has started in 2013, because we felt the need for a personal boutique agency.\r\n\r\nInnocence Models focuses on creating a diverse and constantly growing environment by emphasising the individuality of our Models. We are currently representing 42 models from a myriad of different backgrounds, each with their own unique story. Innocence models can be found working on 4 different continents at any given moment. From New York to Hong Kong, Milan to Amsterdam and everything in between. Our Agency strives to embody and represent the 21st century global mentality, which serves as the cornerstone of our Agency. Through the continuation of these principles our Agency maintains a corporate culture where we precede people and sustainability.\r\n\r\nWe care for our models and high-end clients.\r\n\r\nGiving them a ‘WOW effect’ when booking our models.\r\n\r\nThat is the goal.\r\n\r\nDo you want to elevate your brand as well? And are you looking for that personal touch. Contact us for more information on how we work.",
    "contact": "Mailing Address\r\nINNOCENCE AMSTERDAM            \r\n\r\nPRINSENGRACHT 769, 1017 JZ AMSTERDAM\r\n\r\nOFFICE@INNOCENCEMODELS.COM\r\n\r\nINNOCENCE ANTWERP               \r\n\r\nMARJOLEIN@INNOCENCEMODELS.COM\r\n\r\nINNOCENCE MILAN              \r\n\r\nART@INNOCENCEMODELS.COM"
})

const getContact = async () => {
    const res = await showContactAPI()

    if (res.data.code === 200) {
        contactData.value=res.data.data
    }
    else {
        ElMessage.error(res.data.msg)
    }

}

onMounted(() => {
    getContact()
})
</script>

<style lang="scss" scoped>
.aboutBox {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 30px;

    .left {
        flex: 1;
        min-width: 300px;
        margin-bottom: 30px;
        margin-right: 40px;

        img {
            width: 100%;
            max-width: 580px;
            aspect-ratio: auto 764 / 955;
        }
    }

    .right {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-width: 300px;

        .titleText {
            line-height: 1.2;
            font-family: 'Playfair Display';
            font-weight: 400;
            margin-bottom: 20px;

        }

        p {
            margin-top: 20px;
            margin-bottom: 20px;
            font-family: 'PT Serif';
            font-size: 16px;
            font-weight: 200;
            line-height: 1.625;
            color: #6c6d74;
        }

        span {
            font-family: 'PT Serif';
            font-size: 16px;
            font-weight: 400;
            line-height: 1.625;
            color: #6c6d74;
        }
    }
}
</style>